<template>
	<view class="profile-container">
		<view class="profile-main">
			<!-- 用户基本信息 -->
			<view class="user-header">
				<image :src="userInfo.userAvatar || '/static/logo.png'" class="avatar"></image>
				<view class="user-info-row">
					<view class="user-info-left">
						<view class="name-wrapper">
							<text class="name-prefix">{{ userInfo.userGender === '男' ? 'MR.' : 'MRS.' }}</text>
							<text class="username">{{ userInfo.userName }}</text>
						</view>
						<text class="user-desc">一名{{ userInfo.userSchool }}的{{ roleOptions[userInfo.userRole] }}</text>
					</view>
					<button class="edit-button" @click="editProfile">编辑资料</button>
				</view>
			</view>
			
			<!-- 数据统计 -->
			<view class="stats-container">
				<view class="stat-item">
					<text class="stat-num">2876</text>
					<text class="stat-label">创作</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">365</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">8873</text>
					<text class="stat-label">粉丝</text>
				</view>
			</view>
			
			<!-- 学校信息 -->
			<view class="school-info">
				<image src="/static/logo.png" class="school-icon"></image>
				<text class="school-name">{{ userInfo.userSchool || '暂无学校信息' }}</text>
			</view>
			
			<!-- 学习记录部分 -->
			<view class="study-section">
				<view class="section-header">
					<text class="section-title">学习记录</text>
				</view>
				<scroll-view class="study-scroll" scroll-x="true" show-scrollbar="false">
					<view class="study-grid">
						<view class="study-item" v-for="(item, index) in studyItems" :key="index">
							<image :src="item.image" class="study-image"></image>
							<text class="study-title">{{ item.title }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<button class="logout-button" @click="handleLogout">退出登录</button>
		</view>
		
		<!-- 退出登录按钮 -->
		
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { User } from '@/datas/user.js'

const userInfo = ref(new User())
const roleOptions = ['教师', '学生']  // 添加角色选项数组

const studyItems = ref([
	{
		image: '/static/logo.png',
		title: '如何提高流量'
	},
	{
		image: '/static/logo.png',
		title: '你不知道的运营'
	},
	{
		image: '/static/logo.png',
		title: '你不知道的运营'
	}
])

onShow(() => {
	const storedUserInfo = uni.getStorageSync('userInfo')
	if (storedUserInfo) {
		userInfo.value = new User(storedUserInfo)
	}
	uni.hideLoading()
})

const editProfile = () => {
	uni.navigateTo({
		url: '/pages/profile/setting'
	})
}

const handleLogout = () => {
	// 清除本地存储的用户信息和token
	uni.clearStorageSync()
	
	// 跳转到登录页
	uni.reLaunch({
		url: '/pages/index/index'
	})
}
</script>

<style>
.profile-container {
	padding: 20rpx;
	background-color: var(--design-background-color);
	min-height: var(--window-height);
}

.profile-main {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.user-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 30rpx;
}

.user-info-row {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-info-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.name-wrapper {
	display: flex;
	align-items: baseline;
	margin-bottom: 6rpx;
}

.name-prefix {
	font-size: 45rpx;
	font-weight: bold;
	color: #333;
	margin-right: 4rpx;
}

.username {
	font-size: 50rpx;
	font-weight: bolder;
	color: #333;
}

.user-desc {
	font-size: 25rpx;
	color: #969595;
}

.edit-button {
	background-color: #95EC69;
	color: #333;
	padding: 6rpx 24rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	margin: 0;
	line-height: 1.8;
	font-weight: bold;
}

.avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	margin-bottom: 20rpx;
}

.stats-container {
	display: flex;
	justify-content: space-around;
	padding: 30rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-num {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.stat-label {
	font-size: 26rpx;
	color: #999;
}

.school-info {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.school-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.school-name {
	font-size: 28rpx;
	color: #666;
}

.study-section {
	padding-top: 20rpx;
}

.section-header {
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.study-scroll {
	width: 100%;
	white-space: nowrap;
}

.study-grid {
	display: inline-flex;
	padding-bottom: 10rpx;
}

.study-item {
	width: 300rpx;
	margin-right: 20rpx;
	display: inline-block;
	white-space: normal;
}

.study-item:last-child {
	margin-right: 0;
}

.study-image {
	width: 100%;
	height: 180rpx;
	border-radius: 10rpx;
}

.study-title {
	font-size: 28rpx;
	color: #333;
	margin-top: 10rpx;
	display: block;
}

/* 添加退出登录按钮样式 */
.logout-button {
	margin-top: 30rpx;
	background-color: #FF4D4F;
	color: #ffffff;
	font-weight: bold;
	border-radius: 20rpx;
}
</style> 